<template>
  <div class="padding flex direction-column height-100">
    <el-form ref="form" :model="info" :rules="rules" class=" bg-white padding border-radius flex-1"
             label-width="240px">
      <el-form-item class="width-33" label="节能项目总数">
        <el-input v-model.number="info.projectNumber" type="number" @input="positiveIntegerHandler('projectNumber')">
          <span slot="append">个</span>
        </el-input>
      </el-form-item>
      <el-form-item class="width-33" label="节能项目总投资">
        <el-input v-model.number="info.projectTotalInvestment" type="number"
                  @input="positiveNumberHandler('projectTotalInvestment')">
          <span slot="append">万元</span>
        </el-input>
      </el-form-item>
      <el-form-item class="width-33" label="财政补助总金额">
        <el-input v-model.number="info.financialSubsidy" type="number"
                  @input="positiveNumberHandler('financialSubsidy')">
          <span slot="append">万元</span>
        </el-input>
      </el-form-item>
      <el-form-item class="width-33" label="政府补助率">
        <el-input v-model.number="info.subsidyRate" type="number" @input="percentageHandler('subsidyRate')">
          <span slot="append">%</span>
        </el-input>
      </el-form-item>
      <el-form-item class="width-33" label="预计接入企业数量">
        <el-input v-model.number="info.numberOfCompanies" type="number"
                  @input="positiveIntegerHandler('numberOfCompanies')">
          <span slot="append">家</span>
        </el-input>
      </el-form-item>
      <el-form-item class="width-33">
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { loadEnergySavingProject, saveOrUpdate } from '@/api/energySavingProject'

export default {
  name: 'conservation-project-information',
  data () {
    return {
      info: {
        id: '',
        // 全市节能项目总数
        projectNumber: '',
        // 全市节能项目总投资
        projectTotalInvestment: '',
        // 节能财政补助总金额
        financialSubsidy: '',
        // 节能政府补助率
        subsidyRate: '',
        // 预计接入企业数量
        // 能源管理平台接入率
        numberOfCompanies: '',
      },
      rules: {},
    }
  },
  mounted () {
    this.query()
  },
  methods: {
    backToVisual () {
      this.$router.push({
        name: 'VisualEnterpriseEnergy'
      }).catch(() => {
      })
    },
    positiveIntegerHandler (key) {
      let value = this.info[key]
      value = Math.floor(value)
      value = String(value).replace(/-/g, '')
      this.info[key] = Number(value)
    },
    positiveNumberHandler (key) {
      const value = String(this.info[key])
      this.info[key] = Number(value.replace(/-/g, ''))
    },
    percentageHandler (key) {
      let value = Number(this.info[key])
      value = Math.max(0, value)
      value = Math.min(100, value)
      this.info[key] = value
    },
    query () {
      return loadEnergySavingProject().then(res => {
        if (res.code === 200) {
          this.info = {
            ...this.info,
            ...res.data
          }
        }
      })
    },
    submit () {
      this.$refs.form.validate().then(() => {
        this.update()
      }).catch(() => {
      })
    },
    update () {
      const params = { ...this.info }
      if (!params.id) {
        delete params.id
      }
      return saveOrUpdate(params).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功')
        }
      })
    },
  },
}
</script>
